<template>
    <!-- pages/signDetail/comment/comment.wxml -->
    <view>
        <scroll-view
            :scroll-top="scrollTop"
            :scroll-y="true"
            :style="'height:' + scrollHeight + 'px;'"
            class="list"
            @scrolltolower="bindDownLoad"
            @refresherrefresh="refresh"
            @scroll="scroll"
            :refresher-enabled="true"
            :refresher-triggered="loading"
        >
            <view class="page-section-spacing">
                <view class="pinglunbox" v-for="(item, index) in myList" :key="index">
                    <view class="plu_tx">
                        <image class="plu_tx_img" src="https://hd.kotom.cn/profile/images/ad.png"></image>
                    </view>

                    <view class="pl_con">
                        <text class="pl_con_tit">{{ item.userName }}</text>
                        <text class="pl_con_time">{{ item.createTime }}</text>
                        <view class="imgzu"></view>
                        <text class="pl_con_paragraph">{{ item.comment }}</text>
                    </view>

                    <button style="display: none" class="closebtn"></button>
                </view>
            </view>
        </scroll-view>
        <!-- 加载时文字 -->
        <view class="bomTxt">
            <view v-if="loading">正在加载...</view>
            <view v-if="loaded">已加载全部</view>
        </view>
        <view class="plfb">
            <input class="plfb_input weui-input" @input="inputChange" data-name="content" type="text" auto-focus placeholder="发表你的观点" />
            <button class="plfb_btn" @tap="saveComment" type="primary">发表</button>
        </view>
    </view>
</template>

<script>
// pages/signDetail/comment/comment.js
import api from '../../../utils/api';
const app = getApp();
export default {
    data() {
        return {
            content: '',
            loading: false,
            loaded: false,
            myList: [],
            myPage: 0,
            isEnd: false,
            scrollTop: 100,
            scrollHeight: 300
        };
    },
    props: {
        meetingId: {
            type: String
        }
    },
    methods: {
        inputChange(e) {
            let key = e.currentTarget.dataset['name'];
            this[key] = e.detail.value;
        },

        scroll: function (event) {
            //该方法绑定了页面滚动时的事件，这里记录了当前的 position.y 的值,为了请求数据之后把页面定位到这里来。
            this.setData({
                scrollTop: event.detail.scrollTop + 100
            });
        },
        //上拉刷新
        refresh: function (event) {
            console.log('refresh');
            this.setData({
                myPage: 0,
                myList: [],
                isEnd: false
            });

            if (!this.loading) {
                this.setData({
                    loading: true,
                    loaded: false
                });
            }

            this.loadData();
        },
        //下拉加载
        bindDownLoad: function () {
            let that = this;

            if (this.isEnd == true) {
                console.log('isEnd');
                return;
            }

            if (!that.loading) {
                that.setData({
                    loading: true,
                    loaded: false
                });
            }

            setTimeout(function () {
                that.loadData();
            }, 1000);
        },

        loadData(e) {
            var that = this;
            var page = that.myPage + 1;
            api.post('/rest/api/commentList', {
                page: page,
                meetingId: that.meetingId
            })
                .then((res) => {
                    if (res.data.length != 0) {
                        that.setData({
                            myList: that.myList.concat(res.data),
                            myPage: page
                        });
                    } else {
                        that.setData({
                            isEnd: true
                        });
                    }

                    var tips = '刷新成功';

                    if (page > 1) {
                        tips = '加载成功';
                    }

                    app.globalData.successTip(tips);
                    that.setData({
                        loaded: true,
                        loading: false
                    });
                })
                .catch((err) => {
                    that.setData({
                        loaded: true,
                        loading: false
                    });
                });
        },

        saveComment() {
            let that = this;

            if (this.content == '') {
                uni.showToast({
                    title: '评论内容为空！',
                    icon: 'error',
                    duration: 2000
                });
                return;
            }

            uni.showLoading({
                title: '提交中'
            });
            api.post('/rest/api/saveComment', {
                meetingId: that.meetingId,
                content: that.content
            })
                .then((res) => {
                    console.log(res);
                    that.setData({
                        content: ''
                    });
                    uni.hideLoading();
                    app.globalData.successTip('提交成功');
                })
                .catch((err) => {
                    console.log(err);
                    uni.hideLoading();
                    app.globalData.errorTip(err.msg || '发生异常');
                });
        }
    },
    /**
     * 生命周期函数--监听页面加载
     */
    beforeMount(options) {
        this.loadData();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {}
};
</script>
<style>
/* pages/signDetail/comment/comment.wxss */
.page-section-spacing {
    margin-top: 30px;
}

.scroll-view_H {
    white-space: nowrap;
}

.scroll-view-item {
    height: auto;
}

.plfb {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    padding-top: 20rpx;
}

.weui-input {
    float: left;
    width: 65%;
    padding-left: 20rpx;
}

.plfb_btn {
    float: right;
    width: auto !important;
    margin-bottom: 20rpx;
    margin-right: 20rpx !important;
    border-radius: 6rpx;
    background-color: rgba(27, 117, 255, 1) !important;
}

.pinglunbox {
    margin: 0rpx;
    padding: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    position: relative;
    margin-bottom: 20rpx;
}

.plu_tx {
    float: left;
    width: 80rpx;
}

.plu_tx_img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 80rpx;
    background-color: #ddd;
}

.pl_con {
    float: right;
    width: calc(100% - 100rpx);
}

.pl_con_tit {
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    text-align: left;
    line-height: 24rpx;
    display: block;
    padding-top: 10rpx;
}

.pl_con_time {
    color: rgba(51, 51, 51, 1);
    font-size: 24rpx;
    text-align: left;
    line-height: 24rpx;
    margin-top: 16rpx;
    display: block;
}

.pl_con_paragraph {
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    text-align: left;
    line-height: 24rpx;
}

.imgzu_img {
    width: 31.5%;
    height: 140rpx;
    margin-right: 1.5%;
}

.imgzu {
    padding: 20rpx 0;
}

.closebtn {
    width: 46rpx !important;
    height: 46rpx !important;
    background: url('https://hd.kotom.cn/profile/svg/closeicon.svg') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    padding: 0;
    right: 10rpx;
    top: 10rpx;
}

.bomTxt {
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: rgb(126, 138, 155);
    padding: 0rpx 0rpx 20rpx 0rpx;
}
</style>
